<template>
  <section class="homepage-login">
    <div class="avatar">
      <img src="../../../assets/front/img/login_null.png">
    </div>
    <div class="welcome">
      Hi, 欢迎来到找茶籽网
    </div>
    <div v-if="username" class="username">
      {{username}}
    </div>
    <div class="login-op">
      <div v-if="!username" class="btn login" @click="handleLogin">
        登录
      </div>
      <router-link v-if="!username" to="/f/registry" class="btn registry">
        注册
      </router-link>
      <router-link v-if="username" :to="centerPath" class="btn login">
        用户中心
      </router-link>
      <div v-if="username" class="btn registry" @click="handleLogout">
        注销
      </div>
    </div>
  </section>
</template>

<script>
export default {
    data() {
        return {};
    },
    computed: {
        username() {
            // 获取登录状态
            return this.$store.state.user.name;
        },
        centerPath() {
            return this.$store.state.user.info.type === this.$store.state.userType.admin ? '/a' : '/u/user';
        }
    },
    methods: {
        handleLogin() {
            this.$router.push('/f/login');
        },
        handleLogout() {
            this.$store.dispatch('FedLogOut');
            location.reload();
        }
    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-login {
    width:210px;
    height:200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    .avatar {
      margin-top:24px;
      width:85px;
      height:85px;
      >img{
        width:100%;
        height:100%;
      }
    }
    .welcome {
      margin-top:11px;
      font-size: 12px;
      color:$font-gray-color;
    }
    .username {
      margin-top: 10px;
      font-size: 20px;
    }
    .login-op {
      margin-top:15px;
      width:150px;
      display: flex;
      justify-content: space-around;
      .btn {
        width:63px;
        height:28px;
        @include flex-center;
        border-radius: 14px;
        font-size: 13px;
        cursor: pointer;
      }
      .login {
        background: $main-color;
        color: white;
      }
      .registry{
        color: $main-color;
        border: 1px solid $main-color;
      }
    }

  }



</style>
